<template>
  <div class="ten_box">
    <m-header modile-title="练习18" go-back="true"></m-header>
    <div class="ten_main">
      <form>
        <!--姓名-->
        <input type="text" name="name" placeholder="输入姓名" v-model="name">
        <!--邮箱-->
        <input type="text" name="mail" placeholder="输入邮箱" v-model="mail">
        <!--手机号码-->
        <input type="tel" maxlength="11" name="phone" placeholder="输入电话" v-model="phone">
        <!--标题-->
        <input type="text" name="title" placeholder="输入标题" v-model="title">
        <!--原因-->
        <input type="text" name="msg" placeholder="输入原因" v-model="msg">
        <!--附件-->
        <input type="file" @change="getFile($event)">
        <button @click="submitForm($event)">提交</button>
      </form>
    </div>
    <div class="editor">
      <vue-editor v-model="content" :editorToolbar="customToolbar"></vue-editor>
      <button @click="getEditor">获取富文本的值</button>
    </div>
  </div>
</template>
<style lang="scss">
  .ten_box {
    padding-top: 60px;
    background: #ffffff;
    .ten_main {
      padding: 20px;
      form {
        input {
          display: -webkit-box;
          width: 100%;
          height: 60px;
          border: 1px solid #d9d9d9;
          margin-top: 20px;
          padding: 10px;
          font-size: 15px;
          border-radius: 5px;
          color: #666666;
        }
        input:last-child {
          border: none;
        }
        button {
          width: 100%;
          height: 60px;
          background: #0bb20c;
          font-size: 26px;
          color: #ffffff;
          border: none;
          margin-top: 20px;
        }
      }
    }
    .editor{}
  }
</style>
<script>
  import mHeader from '../../../../components/header'
  import { VueEditor } from "vue2-editor"

  export default {
    data() {
      return {
        name: '',
        mail: '',
        phone: '',
        title: '',
        msg: '',
        file: '',
        content: '',
        // 富文本工具栏配置(字体：加粗,斜体,下划线 文本对齐方式：左,右,居中  背景色 字体颜色  删除线 清除样式 图片 视频  有序无序可选择列表)
        customToolbar:[['bold', 'italic', 'underline'],[{'align':['','center','right','justify']}],[{'background':[]},{'color':[]}], ,['strike'], ['clean'],['image','link'],['video'],[{ list: "ordered" }, { list: "bullet" },{list:"check"}]],
      }
    },
    methods: {
      getFile(event) {
        this.file = event.target.files[0]
        console.log(this.file)
      },
      submitForm(event) {
        event.preventDefault();
        let formData = new FormData();
        formData.append('name', this.name);
        formData.append('mail', this.mail);
        formData.append('phone', this.phone);
        formData.append('title', this.title);
        formData.append('msg', this.msg);
        formData.append('file', this.file);
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        this.$http.post('https://xsfgwyw.zgwyzxw.cn/api/complaint/add', formData, config).then(function (res) {
          console.log(res)
          if (res.data.code === 200) {
            console.log('ok')
          }
          if (res.data.code === 400) {
            console.log(res.data.msg)
          }
        })
      },
      // 获取富文本框的值
      getEditor(){
        console.log(this.content)
      }
    },
    components: {
      mHeader,
      VueEditor
    }
  }
</script>
